/**
 * Created by guiyongdong on 16/10/7.
 */
import  React, {Component} from 'react';
import  {
    StyleSheet,
    View,
    Image,
    TouchableOpacity,
    Dimensions,
    Text,
    ListView
} from 'react-native';


export  default class HomeGuessLikeView extends  Component {
    // 构造
      constructor(props) {
        super(props);
          var ds = new ListView.DataSource({rowHasChanged:(r1,r2) => r1 != r2});
          // 初始状态
          this.state = {
              dataSoure:ds.cloneWithRows(props.goodArray)
          };
      }
    render() {
        return(
            <View style={this.props.style}>
                <ListView
                    initialListSize={5}
                    contentContainerStyle={styles.container}
                    dataSource={this.state.dataSoure}
                    renderRow={this._renderRow}
                    showsHorizontalScrollIndicator={false}
                    horizontal={true}
                />
            </View>
        );
    }
    _renderRow(data,rowId){
        var imageUrl = data['thumb_url'];
        return(
            <TouchableOpacity activeOpacity={0.8}>
                <View style={styles.row}>
                    <Image style={styles.image} source={{uri:imageUrl}}/>
                    <Text style={styles.text} numberOfLines={2}>{data['title']}</Text>
                    <Text style={styles.price}>{'￥'+data['price']}</Text>
                    <Text style={styles.marketPrice}>{'￥'+data['marketPrice']}</Text>
                </View>
            </TouchableOpacity>

        );
    }
}
const styles = StyleSheet.create({
    container: {
        backgroundColor: 'white',
        flexDirection: 'row'
    },
    row: {
        width: 100,
        height: 170
    },
    image:{
        width: 90,
        height: 90,
        marginLeft:10,
        marginTop:10
    },
    text:{
        marginLeft:10,
        marginTop:5,
        fontSize:13,
        color:'#282828'
    },
    price:{
        position:'absolute',
        left:10,
        bottom:15,
        fontSize:13,
        color:'#FF5050'
    },
    marketPrice:{
        position:'absolute',
        left:10,
        bottom:3,
        fontSize:11,
        color:'#999999'
    }
});